<div id="MyPack" data-title="我的套餐">
    <style> 
        @@include('modules/pack/MyPack/main.css.min')
    </style>

<div id="ValueAddService_vue" class="container">
     <!--老用户优惠:已经付过费并且没有享受过半价优惠才显示-->
    <div class="package-discount" v-if="user.has_paid && !user.half_price_paid" evt="openGrabRecharge">
        <div class="discount-title">
            <span class="big">充值5折优惠</span>
            <span>(老用户专享)</span>
        </div>
        <p>优惠截止2017-12-31日前，仅限一次</p>
        <button class="btn recharge" >点击充值</button>
    </div>
    <!--头部基本信息-->
    <div class="userInfo row">
        <img v-bind:src="user.avatar" v-if="user.avatar!=''" alt="头像">
        <img src="`{VIEWSURL}`/m/ChatRoomTpl/images/supplier.jpg" alt="你的头像" v-else>

        <div class="nick">   
            <strong>{{user.nick}}<span class="pull-right w-grab" evt="openRule">什么是汇币?</span></strong>
            <p v-if="expired == false">套餐有效期至{{endTime(pack.end_date)}}。</p>
            <p v-else>新人免费试用59元套餐服务，有效期30天</p>
        </div>
    </div>
    <!--汇币进度条-->
    <div style="margin:0 -.2rem;background: #fff;padding-top:.05rem;position: relative;">
        <Span class="icon-phone06"></Span> 
        <p class="pro-title">汇币</p>
        <div class="progress">
            <div class="progress-bar" role="progressbar" v-bind:aria-valuenow="pack.bid_point" v-bind:aria-valuemin="0" aria-valuemax="pack.accum_bid_point}" v-bind:style="{ width: percentBid + '%' }" >
                <span class="sr-only">60% Complete</span>
            </div> 
        </div>
    </div>
    <div class="myPackage">
        <div class="left"> 
            <p class="desc">剩余</p>
                <p class="count" >
                <span class="used" v-if="expired">0</span>个
                <span class="used" v-else>{{pack.bid_point}}</span>个
            </p>
            
        </div> 
        <div class="right">
            <p class="desc">总量</p>
            <p class="count">
                <span class="total" v-if="expired">0</span>个
                <span class="total" v-else>{{pack.accum_bid_point}}</span>个
            </p>
            
        </div>
    </div>
    <!--汇币进度条完结-->
    <!--短信进度条-->
    <div style="margin:0 -.2rem;background: #fff;position: relative;">
        <Span class="icon-tixing"></Span> 
        <p class="pro-title">新项目提醒</p>
        <div class="progress">
            <div class="progress-bar" role="progressbar" v-bind:aria-valuenow="pack.sms_point" v-bind:aria-valuemin="0" aria-valuemax="pack.accum_sms_point}" v-bind:style="{ width: percentSms + '%' }" >
                <span class="sr-only">60% Complete</span>
            </div> 
        </div>
    </div>
    
    <div class="myPackage marginBotoom">
        <div class="left">
            <p class="desc">剩余</p>
            <p class="count" >
                <span class="used" v-if="expired">0</span>条
                <span class="used" v-else>{{pack.sms_point}}</span>条
            </p>
            
        </div>
        <div class="right">
            <p class="desc">总量</p>
            <p class="count">
                <span class="total" v-if="expired">0</span>条
                <span class="total" v-else>{{pack.accum_sms_point}}</span>条
            </p>
            
        </div>
    </div>
    <!--短信进度条进度条完结-->
    <!--充值-->
    <div class="package-type row">
        <h4>
            套餐充值<span class="promotion">促</span>
        </h4>

        <div class="package-spec clearfix">
            <div class="col-xs-3">
                汇币
            </div>
            <div class="col-xs-3">
                新项目提醒
            </div>
            <div class="col-xs-3 text-right">
                价格
            </div>
            <div class="col-xs-3">
                &nbsp;
            </div>
        </div>
        <div class="package-select clearfix">
            <div class="col-xs-3 package-sel-col">
                50个
            </div>
            <div class="col-xs-3 package-sel-col">
                15条
            </div>
            <div class="col-xs-3 text-right package-sel-col">
                <span class="select-rel"><b class="renew-price">49</b>元/月<span class="trial">试用</span></span>
            </div>
            <div class="col-xs-3 text-right">
                <button class="btn btn-primary btn-renew" type="1" amt="49" evt="openAlipay">充值</button>
            </div>
        </div>
        <div class="package-select clearfix">
            <div class="col-xs-3 package-sel-col">
                110个
            </div>
            <div class="col-xs-3 package-sel-col">
                50条
            </div>
            <div class="col-xs-3 text-right package-sel-col">
                <span class="select-rel"><b class="renew-price">99</b>元/月&nbsp;<span class="ori-price">￥110</span></span>
            </div>
            <div class="col-xs-3 text-right">
                <button class="btn btn-primary btn-renew" type="2" amt="99" evt="openAlipay">充值</button>
            </div>
        </div>
        <div class="package-select clearfix">
            <div class="col-xs-3 package-sel-col">
                240个
            </div>
            <div class="col-xs-3 package-sel-col">
                150条
            </div>
            <div class="col-xs-3 text-right package-sel-col">
                <span class="select-rel"><b class="renew-price">199</b>元/月&nbsp;<span class="ori-price">￥240</span></span>
            </div>
            <div class="col-xs-3 text-right">
                <button class="btn btn-primary btn-renew" type="3" amt="199" evt="openAlipay">充值</button>
            </div>
        </div>
        <!--优惠5折-->
        <div class="package-select clearfix " v-if="user.has_paid && !user.half_price_paid">
            <div class="col-xs-3 package-sel-col line_height">
                <span class="half_price_gray">不超过</span><br>
                10000个
            </div>
            <div class="col-xs-6 package-sel-col half_price_tip">
                为回馈付费老用户特有<br>一次5折优惠充值
            </div>
            <div class="col-xs-3 text-right">
                <button class="btn btn-primary btn-renew half_price_red" evt="openGrabRecharge">充值</button>
            </div>
        </div> 
    </div>
    
    <!--套餐说明-->
    <div class="package-explain row">
        <h6>套餐使用说明：</h6>
        <p>1. 套餐服务用于获得用户信息和新项目提醒，可根据个人需求选择不同套餐；</p>
        <p>2. 充值后会立即生效，有效期为购买日期起30天内有效（包括当天）；</p>
        <p>3. 可重复购买或购买其他套餐，额度可叠加累计；</p>
        <p>4. 若套餐过期，剩余额度将会被冻结，再次充值方可激活；</p>
        <p>5. 成功支付后不支持退款；</p>
        <p>6. 您可自由配置套餐覆盖的省市范围。</p>
    </div>
</div>
</div>